import { ExclamationCircleFilled } from '@ant-design/icons';
import { Modal } from 'antd';
import React from 'react';

interface Props {
  title: string;
  content: string | React.ReactNode;
  callback?: () => void;
  cancelCallBack?: () => void;
  footer?: React.ReactNode;
  open?: boolean;
  width?: number;
  type: 'confirm' | 'info';
  classname?: string;
  okText?: string;
}
function modal(props: Props) {
  const {
    title,
    content,
    callback,
    cancelCallBack,
    classname,
    type = 'confirm',
    ...rest
  } = props;
  let modalProps = {
    icon: classname ? <ExclamationCircleFilled /> : null,
    title,
    content,
    closable: classname ? false : true,
    cancelText: '取消',
    okText: '确定',
    centered: true,
    destroyOnClose: true,
    cancelButtonProps: {
      autoInsertSpace: false,
      style: { backgroundColor: '#F9FBFC' },
    },
    okButtonProps: classname
      ? { danger: true, autoInsertSpace: false }
      : { autoInsertSpace: false },
    className: classname || 'customModal',
    ...rest,
    onCancel: (close: () => void) => {
      cancelCallBack?.();
      close();
    },
    onOk: (close: () => void) => {
      callback?.();
      close();
    },
  };
  let modalInstance = Modal[type]({ ...modalProps });
  return {
    destroy: () => {
      modalInstance.destroy();
    },
  };
}

export default modal;
